<template>
  <div class="box">
    <img class="bg" src="../../../assets/image/detail/topbg.png" alt="" />

    <div class="mainbox">
      <div class="left">
        <div class="shopname">
          <span>{{ storeData.storeName }}</span>
          <img src="../../../assets/image/shop/jiangpai.png" alt="" />
          <!-- <img src="../../../assets/image/shop/king.png" alt="" /> -->
        </div>

        <div class="shoplink">
          <div>http://{{ storeData.storeDomainName }}.wjtzw.cn</div>
          <div class="button" v-if="storeData.collection">已关注</div>
          <div class="button" @click="saveStoreCollection" v-else>关注店铺</div>
        </div>

        <!-- <div class="shoplabel">
          <div class="label">XXX官方认证商家</div>
          <div class="label label1">支持15天退货</div>
          <div class="label label2">支持15天换货</div>
          <div class="label label3">3年店</div>
        </div> -->
      </div>

      <div class="right">
        <div class="left">
          <div class="input">
            <el-input
              placeholder="输入商品关键词"
              v-model="input"
              style="width: 3.31rem"
            ></el-input>
            <img
              class="search"
              src="../../../assets/image/detail/search.png"
              alt=""
            />
            <div class="searchbutton" @click="queryStore">搜本店</div>
            <div class="allbuton" @click="query">搜全网</div>
          </div>

          <!-- <div class="adress">陕西省延安市广华广南二6号楼6单元643号</div> -->

          <div class="lianxibox">
            <!-- <div class="weixin">
              <img src="../../../assets/image/shop/weixin.png" alt="" />
              153****0831
            </div> -->
            <div class="phone weixin">
              <img src="../../../assets/image/detail/phone.png" alt="" />
              <span v-if="show && storeData.storePhone"> {{ storeData.storePhone | phoneFilter }}</span>
              <span v-else> {{ storeData.storePhone }}</span>
            </div>
            <div class="qq weixin">
              <img src="../../../assets/image/detail/qq.png" alt="" />
              <span v-if="show">{{ storeData.storeQq | phoneFilter }}</span>
              <span v-else>{{ storeData.storeQq }}</span>
            </div>
            <div class="show weixin" @click="show = false">
              <img src="../../../assets/image/detail/eye.png" alt="" />
              点击显示
            </div>
          </div>
        </div>
        <!--
        <div class="qrcode">
          <img src="../../../assets/image/shop/qrcode.png" alt="" />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { saveStoreCollection } from '@/api/MyCollection'
import { getToken, removeToken } from '@/utils/auth'
export default {
  props: ['storeData'],

  data () {
    return {
      input: '',
      show: true
    }
  },
  created () {},
  filters: {
    // 手机号过滤器
    phoneFilter (val) {
      if (val) {
        const reg = /^(.{3}).*(.{4})$/
        return val.replace(reg, '$1****$2')
      }
    }
  },
  methods: {
    // 收藏店铺
    saveStoreCollection () {
      const token = getToken()
      if (token) {
        saveStoreCollection({
          idList: `${this.storeData.id}`
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: '关注成功',
              type: 'success'
            })
            this.$parent.pmsStore(this.storeData.id)
          }
        })
      } else {
        this.$message({
          message: '请先登陆！',
          type: 'warning'
        })
      }
    },
    // 搜索商品
    query () {
      this.$router.push({
        path: '/commodity',
        query: {
          goodsName: this.input,
        }
      })
    },
    queryStore(){
      this.$router.push({
        path: '/highshop',
        query: {
          goodsName: this.input,
          id:this.storeData.id,
          index:0
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // background: #1b2017;
  position: relative;
  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .mainbox {
    width: 11.2rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    .left {
      padding: 0.05rem 0rem;
      width: 4.5rem;
      height: calc(100% - 0.1rem);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      .shopname {
        font-size: 0.32rem;
        color: #000000;
        height: auto;
        display: flex;
        align-items: center;
        img {
          margin-left: 0.12rem;
        }
      }
      .shoplink {
        font-size: 0.16rem;
        color: #000000;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .button {
          cursor: pointer;
          margin-left: 0.12rem;
          color: #ec6c15;
          font-size: 0.14rem;
          width: 0.8rem;
          height: 0.22rem;
          line-height: 0.24rem;
          text-align: center;
          border-radius: 0.2rem;
          border: 1px solid #ec6c15;
        }
      }
      .shoplabel {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .label:first-child {
          margin-left: 0rem;
        }
        .label {
          width: auto;
          padding: 0rem 0.06rem;
          margin-left: 0.1rem;
          height: 0.24rem;
          line-height: 0.24rem;
          font-size: 0.14rem;
          color: #000000;
          text-align: center;
          background: #dea06a;
          border-radius: 0.04rem;
        }
        .label1 {
          background: #07c160;
        }
        .label2 {
          background: #07c160;
        }
        .label3 {
          background: #e9e965;
        }
      }
    }
    .right {
      padding: 0.1rem 0rem;
      width: 5rem;
      height: calc(100% - 0.2rem);
      display: flex;
      justify-content: end;
      align-items: center;
      .left {
        width: 3.84rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        // align-items: flex-end;
        .input {
          position: relative;
          width: 2.84rem;
          height: 0.38rem;
          display: flex;
          align-items: center;
          .allbuton {
            cursor: pointer;
            text-align: center;
            top: 0.015rem;
            line-height: 0.33rem;
            // left: 0.1rem;
            right: -0.3rem;
            position: absolute;
            width: 0.66rem;
            height: 0.33rem;
            border: 0.01rem solid #ec6c15;
            border-bottom: none;
            color: #ec6c15;
            font-size: 0.16rem;
          }
          .searchbutton {
            cursor: pointer;
            text-align: center;
            position: absolute;
            right: -0.95rem;
            top: 0.015rem;
            line-height: 0.36rem;
            width: 0.66rem;
            height: 0.36rem;
            border-radius: 0 0.2rem 0.2rem 0;
            font-family: PingFang SC;
            text-align: center;
            color: #ffffff;
            font-size: 0.16rem;
            background: #ec6c15;
          }
          .search {
            top: 0.08rem;
            left: 0.1rem;
            position: absolute;
          }
          ::v-deep .el-input__inner {
            width: 3.31rem;
            padding-left: 0.33rem;
            border-radius: 0.25rem;
            border: 0.01rem solid #ec6c15 !important;
            color: #999999 !important;
            background: linear-gradient(
              180deg,
              #f2f4f9 0%,
              rgba(242, 244, 249, 0.39) 100%
            ) !important;
          }
          ::v-deep .el-input__suffix {
            color: #999999 !important;
          }
          ::v-deep .el-input__inner::placeholder {
            color: #999999 !important;
          }
        }
        .adress {
          font-size: 0.16rem;
          color: #e9e965;
        }
        .lianxibox {
          margin-left: 0.57rem;
          width: 100%;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          font-size: 0.12rem;
          color: #ec6c15;
          .weixin {
            margin-right: 0.17rem;
            display: flex;
            align-items: center;
            font-size: 0.16rem;
            img {
              width: 0.16rem;
              height: 0.16rem;
            }
          }
          .phone {
          }
          .qq {
          }
          .show {
            cursor: pointer;
          }
        }
      }
      .qrcode {
        width: 0.92rem;
        height: 0.92rem;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 0.88rem;
          height: 0.88rem;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
// @media screen and (max-width: 1300px) {
//   .box {
//     width: 100%;
//     height: 100%;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     // background: #1b2017;
//     position: relative;
//     .bg {
//       width: 100%;
//       height: 100%;
//       position: absolute;
//       top: 0;
//       left: 0;
//     }
//     .mainbox {
//       width: 11.2rem;
//       height: 100%;
//       display: flex;
//       justify-content: space-between;
//       align-items: center;
//       z-index: 99;
//       .left {
//         padding: 0.05rem 0rem;
//         width: 4.5rem;
//         height: calc(100% - 0.1rem);
//         display: flex;
//         flex-direction: column;
//         justify-content: space-around;
//         align-items: flex-start;
//         .shopname {
//           font-size: 0.32rem;
//           color: #000000;
//           height: auto;
//           display: flex;
//           align-items: center;
//           img {
//             margin-left: 0.12rem;
//           }
//         }
//         .shoplink {
//           font-size: 0.16rem;
//           color: #000000;
//           display: flex;
//           justify-content: flex-start;
//           align-items: center;
//           .button {
//             cursor: pointer;
//             margin-left: 0.12rem;
//             color: #ec6c15;
//             font-size: 0.14rem;
//             width: 0.8rem;
//             height: 0.22rem;
//             line-height: 0.24rem;
//             text-align: center;
//             border-radius: 0.2rem;
//             border: 1px solid #ec6c15;
//           }
//         }
//         .shoplabel {
//           width: 100%;
//           height: auto;
//           display: flex;
//           justify-content: flex-start;
//           align-items: center;
//           .label:first-child {
//             margin-left: 0rem;
//           }
//           .label {
//             width: auto;
//             padding: 0rem 0.06rem;
//             margin-left: 0.1rem;
//             height: 0.24rem;
//             line-height: 0.24rem;
//             font-size: 0.14rem;
//             color: #000000;
//             text-align: center;
//             background: #dea06a;
//             border-radius: 0.04rem;
//           }
//           .label1 {
//             background: #07c160;
//           }
//           .label2 {
//             background: #07c160;
//           }
//           .label3 {
//             background: #e9e965;
//           }
//         }
//       }
//       .right {
//         padding: 0.1rem 0rem;
//         width: 5rem;
//         height: calc(100% - 0.2rem);
//         display: flex;
//         justify-content: end;
//         align-items: center;
//         .left {
//           width: 3.9rem;
//           height: 100%;
//           display: flex;
//           flex-direction: column;
//           // justify-content: space-between;
//           // align-items: flex-end;
//           .input {
//             position: relative;
//             width: 2.84rem;
//             height: 0.38rem;
//             display: flex;
//             align-items: center;
//             .allbuton {
//               cursor: pointer;
//               text-align: center;
//               top: -0.06rem;
//               line-height: 35px;
//               // left: 0.1rem;
//               right: -0.3rem;
//               position: absolute;
//               width: 0.66rem;
//               height: 34px;
//               border: 0.01rem solid #ec6c15;
//               border-bottom: none;
//               color: #ec6c15;
//               font-size: 0.02rem;
//               border-top: none;
//             }
//             .searchbutton {
//               cursor: pointer;
//               text-align: center;
//               position: absolute;
//               right: -0.9rem;
//               top: -0.06rem;
//               line-height: 34px;
//               width: 0.66rem;
//               height: 34px;
//               border-radius: 0 0.2rem 0.2rem 0;
//               font-family: PingFang SC;
//               text-align: center;
//               color: #ffffff;
//               font-size: 0.02rem;
//               background: #ec6c15;
//             }
//             .search {
//               top: 0.08rem;
//               left: 0.1rem;
//               position: absolute;
//             }
//             ::v-deep .el-input__inner {
//               width: 3.31rem;
//               padding-left: 0.33rem;
//               border-radius: 0.25rem;
//               border: 0.01rem solid #ec6c15 !important;
//               color: #999999 !important;
//               background: linear-gradient(
//                 180deg,
//                 #f2f4f9 0%,
//                 rgba(242, 244, 249, 0.39) 100%
//               ) !important;
//             }
//             ::v-deep .el-input__suffix {
//               color: #999999 !important;
//             }
//             ::v-deep .el-input__inner::placeholder {
//               color: #999999 !important;
//             }
//           }
//           .adress {
//             font-size: 0.14rem;
//             color: #e9e965;
//           }
//           .lianxibox {
//             margin-left: 0.57rem;
//             width: 100%;
//             display: flex;
//             // justify-content: space-between;
//             align-items: center;
//             font-size: 0.12rem;
//             color: #ec6c15;
//             .weixin {
//               margin-right: 0.17rem;
//               display: flex;
//               align-items: center;
//               img {
//                 width: 0.16rem;
//                 height: 0.16rem;
//               }
//             }
//             .phone {
//             }
//             .qq {
//             }
//             .show {
//               cursor: pointer;
//             }
//           }
//         }
//         .qrcode {
//           width: 0.92rem;
//           height: 0.92rem;
//           background: #ffffff;
//           display: flex;
//           justify-content: center;
//           align-items: center;
//           img {
//             width: 0.88rem;
//             height: 0.88rem;
//           }
//         }
//       }
//     }
//   }
// }
</style>
